<template>
  <article class="page">
    <headerbar>添加荣誉</headerbar>
    <section class="frame-content-sub no-bg">
      <section class="block pdh-3">

        <div class="mgt-10"></div>



        <div class="input-row-wrap">
          <i class="required color-red">*</i>荣誉名称：
        </div>
        <div class="input-column-wrap">
          <div class="input-wrap">
            <input type="text" placeholder="请输入荣誉名称" v-model="name">
          </div>
        </div>

          <div class="mgt-2"></div>
        <div class="input-row-wrap">
          <i class="required color-red">*</i>颁奖单位：
        </div>
        <div class="input-column-wrap">
          <div class="input-wrap">
            <input type="text" placeholder="请输入颁奖单位" v-model="company">
          </div>
        </div>

          <div class="mgt-2"></div>
        <div class="input-row-wrap">
          <i class="required color-red">*</i>颁奖时间：
        </div>
        <div class="input-column-wrap">
          <div class="input-wrap" @click="showTimePicker()"><input readonly type="text" placeholder="请选择颁奖时间" v-model="honorTime"></div>
        </div>


          <div class="mgt-2"></div>

        <div class="input-row-wrap">
          支撑材料：
        </div>
<!--          <section class=" upload-wrap">
            <cube-upload ref="upload"
                         action=""
                         v-model="files"
                         accept="*/*"
                         :simultaneous-uploads="1"
                         @files-added="uploadFile"
                         @file-removed="fileRemoved"
                         @input="onInput"
            />
          </section>-->
        <!--        ios的选择图片-->
        <div v-if="tools.isIos()">
          <cube-upload ref="upload"
                       action=""
                       v-model="files"
                       accept="image/*"
                       :simultaneous-uploads="1"
                       :multiple="!0"
                       @files-added="uploadFile"
                       @file-removed="fileRemoved"
                       @input="onInput"
          />
        </div>
        <div v-else >
          <cube-upload ref="upload"
                       action=""
                       v-model="files"
                       accept="mutiimage/*"
                       :simultaneous-uploads="1"
                       :multiple="!0"
                       @files-added="uploadFile"
                       @file-removed="fileRemoved"
                       @input="onInput"
          />
        </div>
      </section>

      <div class="pdv-10"></div>

      <div class="pdh-4">
        <button class="default-block-btn" :disabled="isDisable" v-preventReClick="1000" @click="submit($event)">提交</button>
      </div>

      <div class="pdv-10"></div>

    </section>
  </article>
</template>

<script>
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import fileIcon from '../../../../static/images/up_document.png'
  import moment from 'moment'

  export default {
    name: 'myHonorUpload',
    data () {
      return {
        files: [],
        attachmentList: [],
        honorLevel: '',
        honorLevelValue: '',
        honorTime: '',
        honorTimeValue: '',
        datePicker: null,
        name: '',
        honorLevelList: [],
        company: '',
        uploadStatus: 1, //上传状态，0上传中、1全部上传完成
        isDisable:false,//防止多次提交
      }
    },
    created () {
      this.dictValue()
    },
    methods: {
      submit (e) {
        if (e.target.disabled) {
          return false
        }
        if (this.name === '') {
          return tools.tip('荣誉名称不能为空！')
        }
        if (this.company === '') {
          return tools.tip('颁奖单位不能为空！')
        }
        if (this.honorTimeValue === '') {
          return tools.tip('颁奖时间不能为空！')
        }
        if (this.uploadStatus !== 1) { //文件未上传完
          return tools.tip('文件上传中，请稍候···')
        }
        this.isDisable = true;//点击后禁用该按钮；
        let files = ''
        let filesOssUrl = ''
        let index = -1
        this.attachmentList.map((v, i) => {
          files = files + v.fileid + ','
          filesOssUrl = filesOssUrl + v.filesOssUrl + ','
          index = i
        })
        if (index !== -1) {
          files = files.substring(0, files.length - 1)
          filesOssUrl = filesOssUrl.substring(0, filesOssUrl.length - 1)
        }
        console.log("------------files=", files)
        let data = {
          honorName: this.name,
          limit: 200,
          files: files,
          filesOssUrl:filesOssUrl,
          awardCompany: this.company,
          awardTimeStr: this.honorTimeValue
        }
        loginService.honorInfo(data).then((res) => {
          if (res.code !== 0) {
            this.isDisable = false;//响应后延迟几秒回复正常；
            return tools.tip(res.message)
          } else {
            tools.tip('上传个人荣誉成功！')
            tools.back()
            setTimeout(() => {
              this.isDisable = false;//响应后延迟几秒回复正常；
            }, 2500)
          }
        })
      },
      // 删除文件
      fileRemoved (file) {
        this.attachmentList.some((v, i) => {
          if (v.fileName === file.file.name && v.totalBytes === file.file.size) {
            this.attachmentList.splice(i, 1)
            return false
          }
        })
      },
      uploadFile (file) {
        console.log('--------------file.length=', file.length)
        this.uploadStatus = 0;
        let length = file.length
        let i = 0
        Array.prototype.slice.call(file).forEach((v) => {
          let formData = new FormData()
          formData.append('file', v)
          loginService.o_upload(formData).then((res) => {

            if (res.code !== 0) {
              return tools.tip(res.message)
            }
            // tools.tip('上传成功！')
            i++
            this.attachmentList.push({'fileid': res.data.fileId,'filesOssUrl':res.data.desc,'fileName': v.name, 'totalBytes': res.data.totalBytes, 'type': '1'})
            // console.log('ii==',i);
            // console.log('i == file.lengthi == file.length=',i === length);
            // console.log('i == file.lengthi == file.length=',length);
            if(i === length) {
              this.uploadStatus = 1;
            }
          })
        })


      },
      onInput (file) {
        this.$refs.upload.files.map((v) => {
          if (!tools.isImage(v.name)) {
            v.url = fileIcon
          }
          return v
        })
      },
      // 荣誉日期：2019-12-06
      showTimePicker () {
        if (!this.datePicker) {
          let me = this
          let nowYear = new Date().getFullYear()
          this.datePicker = this.$createDatePicker({
            min: new Date(2008),
            max: new Date(),
            value: new Date(),
            onSelect: (selectedTime, selectedText, formatedTime) => {
              this.honorTime = this.honorTimeValue = moment(selectedTime).format('YYYY-MM-DD')
              console.log('----------------honorTime=', this.honorTime)
            }
          })
        }
        this.datePicker.show()
      },
      // 选择荣誉级别
      showSubType () {
        this.$createActionSheet({
          title: '荣誉级别',
          active: 10,
          data: this.honorLevelList,
          onSelect: (item, index) => {
            this.honorLevel = item.content
            this.honorLevelValue = item.scope
            this.$forceUpdate()
          },
          onCancel: () => {
          }
        }).show()
      },
      dictValue () {
        let data = {
          catKey: 'CAT_DIM',
          treeKey: 'RYJB'
        }
        loginService.dictValue(data).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          } else {
            res.data.map((v, i) => {
              let data = {
                scope: v.key,
                content: v.value
              }
              this.honorLevelList.push(data)
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
.default-block-btn{
  width: 100%;
}
</style>
